<template>
    <div>
        <div class="back">
        <img @click="back"  src="../../assets/back.png" alt="">
        <h3>实名认证</h3>
        </div>
        <div class="Tips"><img src="../../assets/Tips.png" alt=""> 请填写个人真实信息</div>
    
    <div class="Information">
        
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="12">
            <el-form-item label="姓名" prop="field102">
              <el-input v-model="formData.field102" placeholder="请输入姓名" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构类型" prop="field110">
              <el-input v-model="formData.field110" placeholder="请输入机构类型" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="field103">
              <el-input v-model="formData.field103" placeholder="请输入联系方式" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构名称" prop="field111">
              <el-input v-model="formData.field111" placeholder="请输入机构名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="mobile">
              <el-input v-model="formData.mobile" placeholder="请输入身份证号" :maxlength="11" show-word-limit
                clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织机构代码证" prop="field112" required>
              <el-upload ref="field112" :file-list="field112fileList" :action="field112Action"
                :before-upload="field112BeforeUpload">
                <el-button size="small" type="primary" icon="el-icon-upload">证件上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件有效期" prop="field107">
              <el-date-picker v-model="formData.field107" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :style="{width: '100%'}" placeholder="请选择证件有效期" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码" prop="field113">
              <el-input v-model="formData.field113" placeholder="请输入统一社会信用代码" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件详细地址" prop="field109">
              <el-select v-model="formData.field109" placeholder="请选择证件详细地址" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in field109Options" :key="index" :label="item.label"
                  :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人姓名" prop="field114">
              <el-input v-model="formData.field114" placeholder="请输入法人姓名" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址" prop="field115">
              <el-input v-model="formData.field115" placeholder="请输入详细地址" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证照片" prop="field105" required>
              <el-upload ref="field105" :file-list="field105fileList" :action="field105Action"
                :before-upload="field105BeforeUpload" list-type="picture" accept="image/*">
                <el-button size="small" type="primary" icon="el-icon-upload">人像面</el-button>
                <el-button size="small" type="primary" icon="el-icon-upload">国徽面</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业电话" prop="field116">
              <el-input v-model="formData.field116" placeholder="请输入企业电话" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业公章" prop="field118" required>
              <el-upload ref="field118" :file-list="field118fileList" :action="field118Action"
                :before-upload="field118BeforeUpload">
                <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构邮箱" prop="field117">
              <el-input v-model="formData.field117" placeholder="请输入机构邮箱" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人章" prop="field119" required>
              <el-upload ref="field119" :file-list="field119fileList" :action="field119Action"
                :before-upload="field119BeforeUpload">
                <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item size="large">
              <el-button type="primary" @click="nextstep">下一步</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
</div>
  </template>
  <script>
  export default {
    components: {},
    props: [],
    data() {
      return {
        formData: {
          field102: undefined,
          field110: undefined,
          field103: undefined,
          field111: undefined,
          mobile: '',
          field112: null,
          field107: null,
          field113: undefined,
          field109: undefined,
          field114: undefined,
          field115: undefined,
          field105: null,
          field116: undefined,
          field118: null,
          field117: undefined,
          field119: null,
        },
        rules: {
          field102: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          field110: [{
            required: true,
            message: '请输入机构类型',
            trigger: 'blur'
          }],
          field103: [{
            required: true,
            message: '请输入联系方式',
            trigger: 'blur'
          }],
          field111: [{
            required: true,
            message: '请输入机构名称',
            trigger: 'blur'
          }],
          mobile: [{
            required: true,
            message: '请输入身份证号',
            trigger: 'blur'
          }, {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur'
          }],
          field107: [{
            required: true,
            message: '请选择证件有效期',
            trigger: 'change'
          }],
          field113: [{
            required: true,
            message: '请输入统一社会信用代码',
            trigger: 'blur'
          }],
          field109: [{
            required: true,
            message: '请选择证件详细地址',
            trigger: 'change'
          }],
          field114: [{
            required: true,
            message: '请输入法人姓名',
            trigger: 'blur'
          }],
          field115: [{
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }],
          field116: [{
            required: true,
            message: '请输入企业电话',
            trigger: 'blur'
          }],
          field117: [{
            required: true,
            message: '请输入机构邮箱',
            trigger: 'blur'
          }],
        },
        field112Action: 'https://jsonplaceholder.typicode.com/posts/',
        field112fileList: [],
        field105Action: 'https://jsonplaceholder.typicode.com/posts/',
        field105fileList: [],
        field118Action: 'https://jsonplaceholder.typicode.com/posts/',
        field118fileList: [],
        field119Action: 'https://jsonplaceholder.typicode.com/posts/',
        field119fileList: [],
        field109Options: [{
          "label": "选项一",
          "value": 1
        }, {
          "label": "选项二",
          "value": 2
        }],
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        back(){
            this.$router.back()
        },
      field112BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      field105BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        let isAccept = new RegExp('image/*').test(file.type)
        if (!isAccept) {
          this.$message.error('应该选择image/*类型的文件')
        }
        return isRightSize && isAccept
      },
      field118BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      field119BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
    }
  }
  
  </script>
  <style>
    .back{
        position: absolute;
        width: 110px;
        height: 30px;
        justify-items: center;
        left: 10px;
        top: -10px;
        display: flex;
        justify-content: space-between;
    }
    .back img{
        width: 25px;
        height: 15px;
        margin-top: 23px;
    }
    .Tips{
        position: absolute;
        top: 40px;
        width: 100%;
        height: 20px;
        line-height: 20px;
        background-color: #E5F3FF;
        color: #333333;
        font-size: 10px;
        display: flex;
    }
    .Tips img{
        width: 20px;
        height: 20px;
        margin:  0 10px 0 20px;
    }
    .Information{
        position: absolute;
        width: 1400px;
        height: 700px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        }
  .el-upload__tip {
    line-height: 1.2;
  }
  
  </style>
  